<template>
  <div class="home">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/homeview' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/recommended' }">推荐</el-breadcrumb-item>
      <el-breadcrumb-item>同上一堂好课</el-breadcrumb-item>
    </el-breadcrumb>
    <img src="https://teacher.ykt.eduyun.cn/img/banner-web-a5ad8db1.jpg" class="photo">

    <section class="course-list">
      <div class="course-item" v-for="course in courses" :key="course.id">
        <img :src="course.image" alt="出版社" class="course-image">
        <div class="course-info">
          <h2 class="course-title">{{ course.title }}</h2>
          <p class="course-description">{{ course.description }}</p>
        </div>
      </div>
    </section>
    <div class="pagination-container">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[12, 20, 30, 40]"
          :page-size="12"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalItems">
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElBreadcrumb,ElPagination } from 'element-plus';

const courses = ref([
  {
    id: 1,
    title: '人民教育出版社',
    description: '人民教育出版社',
    image: 'https://bdcs-file-1.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/07db4487-55fa-427c-b36f-5d5a695070bd/avatar/1732116442990.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 2,
    title: '西南大学出版社',
    description: '西南大学出版社',
    image: 'https://bdcs-file-1.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/6024df09-0f7a-446c-a6bb-20119c4fe6d4/avatar/1732116429399.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 3,
    title: '外语教学与研究出版社',
    description: '外语教学与研究出版社',
    image: 'https://bdcs-file-2.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/f517122e-5c28-45aa-aec0-9fffa221c066/avatar/1732116415562.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 4,
    title: '山东科学技术出版社',
    description: '山东科学技术出版社',
    image: 'https://bdcs-file-2.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/745d21ac-0850-4cf0-b43b-d30f790c4b04/avatar/1732116402841.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 5,
    title: '湖南教育出版社',
    description: '湖南教育出版社',
    image: 'https://bdcs-file-1.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/8a4c2257-44ca-4e2a-9952-75af383fcd3a/avatar/1732116389816.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 6,
    title: '大同出版传媒',
    description: '大同出版传媒',
    image: 'https://bdcs-file-2.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/989a013d-a23b-4caa-8ff8-434797e6d984/avatar/1732116376922.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 7,
    title: '华东师范大学出版社',
    description: '华东师范大学出版社',
    image: 'https://bdcs-file-2.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/30824e43-5cc5-46b3-b123-19649722d53b/avatar/1732116341460.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 8,
    title: '湖南美术出版社',
    description: '湖南美术出版社',
    image: 'https://bdcs-file-2.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/bf6e111e-e75c-4316-8063-c144b03dfc40/avatar/1732116328733.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 9,
    title: '江苏凤凰教育出版社',
    description: '江苏凤凰教育出版社',
    image: 'https://bdcs-file-1.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/59b8da2d-dc51-480d-86f0-86fdfcc23b99/avatar/1732116315641.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 10,
    title: '江苏凤凰少年儿童出版社',
    description: '江苏凤凰少年儿童出版社',
    image: 'https://bdcs-file-1.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/4fd96c67-065f-47be-a816-634ecca01700/avatar/1732116301786.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 11,
    title: '科学普及出版社',
    description: '科学普及出版社',
    image: 'https://bdcs-file-2.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/9706d8eb-8a88-473f-bf52-fc9e3157df4f/avatar/1732116270459.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  },
  {
    id: 12,
    title: '广东教育出版社',
    description: '广东教育出版社',
    image: 'https://bdcs-file-2.ykt.cbern.com.cn/e_teacher_studio/teacherStudio/0b9f059d-ed66-4634-9b17-61443141deca/avatar/1732116256714.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360'
  }
  // 更多课程...
]);

const currentPage = ref(1);
const pageSize = ref(100);
const totalItems = ref(25);

const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize;
};

const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
};

const goToCourseDetail = (id: number) => {
  // 跳转到课程详情页面的逻辑
  console.log('Go to course detail:', id);
};
</script>

<style scoped>
.home {
  font-family: Arial, sans-serif;
}

.breadcrumb {
  margin-left: 60px;
  margin-top: 20px;
}
.photo {
  width: 92%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 8px;
}

.course-intro h1 {
  font-size: 32px;
  color: #346af3;
}

.course-intro p {
  color: #666;
}

.course-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  padding: 20px;
}

.course-item {
  width: 28%;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  transition: transform 0.3s ease;
  padding: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.course-item:hover {
  transform: translateY(-5px);
}

.course-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
}
.course-info{
  flex-grow: 1;
}

.course-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}

.course-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}



</style>